<!doctype html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>css4_margin&padding</title>

   <style>

      /*外边距的合并 下30 和上20 ---->30*/
      #d2,
      #d3 {
         width: 60px;
         height: 60px;
      }

      #d2 {
         background-color: #ff0;
         margin-bottom: 30px;
      }

      #d3 {
         background-color: #0ff;
         margin-top: 20px;
      }

      #d4 {
         width: 200px;
         height: 200px;
         background-color: #ff0;
      }

      #d5 {
         width: 100px;
         height: 100px;
         background-color: #0ff;
         margin-top: 20px;
      }
      #d_box {
         width: 200px;
         height: 30px;
         border: 1px solid #ff0000;
         padding: 2px 10px
      }
      /*改变盒子计算方式 box-sizing*/
      /*测试去掉 box-sizing*/
      #d_box input {
         width: 100%;
         height: 100%;
         padding: 3px;
         border: 1px solid blue;
         box-sizing: border-box;
      }

      #d2_box {
         width: 600px;
         border: 2px solid #ff0000;
      }

      #d2_box img {
         width: 20%;
         padding: 3px;
         border: 1px solid;
         box-sizing: border-box;
      }
   </style>
   <link rel="stylesheet" href="css/css_common.css">
</head>

<body>

   <p>外边距的合并</p>
   <div id="d2"></div>
   <div id="d3"></div>
   <hr>
   <p>外边距的溢出</p>
   <div id="d4">
      <table></table>
      <div id="d5"></div>
   </div>
   <hr>
   <p>box-sizing: border-box;</p>
   <p>widt= 计算公式：左右外边距+内容</p>
   <div id="d_box">
      <input type="text">
   </div>
   <hr>
   <div id="d2_box">
      <img src="img/1wan.png" alt=""><img src="img/1wan.png" alt=""><img src="img/1wan.png" alt=""><img
         src="img/1wan.png" alt=""><img src="img/1wan.png" alt="">
   </div>
   <br><br><br><br><br><br><br><br><br>

</body>

</html>